/*
 * @Author: xiaobai123-4 1713951641@qq.com
 * @Date: 2025-03-26 14:47:51
 * @LastEditors: xiaobai123-4 1713951641@qq.com
 * @LastEditTime: 2025-04-01 11:17:11
 * @FilePath: \electronic-bulletin-board\src\views\ElectronBoard.jsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React, { useState } from 'react';
import { Responsive, WidthProvider } from 'react-grid-layout';
import PDFGridTitle from './PDFGridTitle';
// import PDFIframe from '../../PDFIframe'
import PDFViewer from '../../components/PDFViewer';

const ResponsiveGridLayout = WidthProvider(Responsive);

export default function App() {
    const [layouts, setLayouts] = useState({
        lg: [
            // 国家局、集团公司、救护消防大队
            { i: 'a', x: 0, y: 0, w: 12, h: 2, minW: 3, minH: 2 },
            { i: 'b', x: 0, y: 1, w: 3, h: 16, minW: 3, minH: 2 },
            { i: 'c', x: 3, y: 1, w: 3, h: 16, minW: 3, minH: 2 },
            { i: 'd', x: 6, y: 1, w: 3, h: 16, minW: 3, minH: 2 },
            { i: 'e', x: 9, y: 1, w: 3, h: 16, minW: 3, minH: 2 },
            // 调度指挥中心
            { i: 'f', x: 0, y: 2, w: 12, h: 2, minW: 3, minH: 2 },
            { i: 'g', x: 0, y: 3, w: 3, h: 16, minW: 3, minH: 2 },
            { i: 'h', x: 3, y: 3, w: 3, h: 16, minW: 3, minH: 2 },
            { i: 'i', x: 6, y: 3, w: 3, h: 16, minW: 3, minH: 2 },
            { i: 'j', x: 9, y: 3, w: 3, h: 16, minW: 3, minH: 2 },

            { i: 'k', x: 0, y: 4, w: 3, h: 16, minW: 3, minH: 2 },
            { i: 'l', x: 3, y: 4, w: 3, h: 16, minW: 3, minH: 2 },
            { i: 'm', x: 6, y: 4, w: 3, h: 16, minW: 3, minH: 2 },
            { i: 'n', x: 9, y: 4, w: 3, h: 16, minW: 3, minH: 2 },
        ]
    });
    const [pdfKey, setPdfKey] = useState(0)


    return (
        <ResponsiveGridLayout
            className="layout"
            layouts={layouts}// 各断点布局配置
            margin={[10, 10]}// 元素间距 [水平, 垂直]
            breakpoints={{ lg: 1200 }}// 响应式断点配置
            cols={{ lg: 12 }}// 各断点列数
            rowHeight={20}// 行基准高度（像素）
            resizeHandles={['se']}
            draggableHandle=".react-grid-drag-box" // 指定拖动手柄选择器
            onLayoutChange={(layout, layouts) => {
                setLayouts(layouts)
                setPdfKey(new Date().getTime())
            }}
        >
            <div key="a" className="grid-item">
                <PDFGridTitle title='国家局、集团公司、救护消防大队' />
            </div>
            <div key="b" className="grid-item">
                {/* <PDFIframe /> */}
                <PDFViewer renderKey={pdfKey} folderUrl="文档1.pdf" />
            </div>
            <div key="c" className="grid-item">
                {/* <PDFIframe /> */}
                <PDFViewer renderKey={pdfKey} folderUrl="文档1.pdf" />
            </div>
            <div key="d" className="grid-item">
                {/* <PDFIframe /> */}
                <PDFViewer renderKey={pdfKey} folderUrl="文档1.pdf" />
            </div>
            <div key="e" className="grid-item">
                {/* <PDFIframe /> */}
                <PDFViewer renderKey={pdfKey} folderUrl="文档1.pdf" />
            </div>
            <div key="f" className="grid-item">
                <PDFGridTitle title='调度指挥中心' />
            </div>
            <div key="g" className="grid-item">
                {/* <PDFIframe /> */}
                <PDFViewer renderKey={pdfKey} folderUrl="文档1.pdf" />
            </div>
            <div key="h" className="grid-item">
                {/* <PDFIframe /> */}
                <PDFViewer renderKey={pdfKey} folderUrl="文档1.pdf" />
            </div>
            <div key="i" className="grid-item">
                {/* <PDFIframe /> */}
                <PDFViewer renderKey={pdfKey} folderUrl="文档1.pdf" />
            </div>
            <div key="j" className="grid-item">
                {/* <PDFIframe /> */}
                <PDFViewer renderKey={pdfKey} folderUrl="文档1.pdf" />
            </div>
            <div key="k" className="grid-item">
                {/* <PDFIframe /> */}
                <PDFViewer renderKey={pdfKey} folderUrl="文档1.pdf" />
            </div>
            <div key="l" className="grid-item">
                {/* <PDFIframe /> */}
                <PDFViewer renderKey={pdfKey} folderUrl="文档1.pdf" />
            </div>
            <div key="m" className="grid-item">
                {/* <PDFIframe /> */}
                <PDFViewer renderKey={pdfKey} folderUrl="文档1.pdf" />
            </div>
            <div key="n" className="grid-item">
                {/* <PDFIframe /> */}
                <PDFViewer renderKey={pdfKey} folderUrl="文档1.pdf" />
            </div>
        </ResponsiveGridLayout>
    );
}